<template>
  <div class="c-auth-feature">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="search"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <c-row-view-opn
          type="primary"
          :auth="true"
          :visible.sync="visibles.edit"
          @cancel="cancel"
          @save="submit"
        >
        </c-row-view-opn>
      </template>
    </c-row-search>
    <c-table height="calc(100% - 56px)" :data="filterData">
      <el-table-column :label="multLang('title_ba_x')" width="260">
        <template slot-scope="{ row }">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column
        :label="multLang('title_aak_y')"
        align="center"
        width="80"
      >
        <template slot-scope="{ row }">
          <el-checkbox
            :disabled="!visibles.edit"
            :indeterminate="
              row.select.length > 0 && row.select.length < row.feature.length
            "
            v-model="row.all"
            @change="selectAll($event, row)"
          >
            {{ multLang('title_aak_y') }}
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column :label="multLang('title_ai_q')">
        <template slot-scope="{ row }">
          <el-checkbox-group
            :disabled="!visibles.edit"
            v-model="row.select"
            @change="selectChange($event, row)"
          >
            <el-checkbox
              v-for="item in row.feature"
              v-model="item.auth"
              :key="item.nid"
              :label="item.id"
              @change="checkboxChange($event, row)"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
    </c-table>
  </div>
</template>
<script>
import { selectAuthFeature } from '@/http/api/v1/auth'
import { searchWord } from '@/util/data'
export default {
  name: 'CAuthFeature',
  components: {},
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      visibles: { edit: false },
      keyword: '',
      filterData: []
    }
  },
  computed: {},
  watch: {
    data: {
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(this.keyword, this.data, 'name')
    },
    selectAll(val, row) {
      row.select = val ? row.feature.map(item => item.id) : []
      val && this.selectFeature(row.parent)
    },
    selectFeature(data) {
      while (data) {
        if (data.feature.length) {
          const feature = data.feature[0]
          feature.auth = true
          data.select.includes(feature.id) || data.select.push(feature.id)

          data.all = data.feature.length
            ? data.select.length === data.feature.length
            : false
        }
        data = data.parent
      }
    },
    selectChange(val, row) {
      row.all = row.feature.length ? val.length === row.feature.length : false
    },
    checkboxChange(val, row) {
      val && this.selectFeature(row.parent)
    },
    cancel() {
      this.visibles.edit = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    submit() {
      const { id } = this.info
      const permissionIds = this.getAllSelect(this.data)
      id &&
        selectAuthFeature({ id, permissionIds }).then(() => {
          this.visibles.edit = false
        })
    },
    getAllSelect(data) {
      const arr = []
      data.forEach(item => {
        arr.push(...item.select)
        arr.push(...this.getAllSelect(item.children))
      })
      return arr
    }
  }
}
</script>
<style lang="scss">
.c-auth-feature {
  height: 100%;
  .c-table {
    .el-checkbox-group {
      .el-checkbox {
        vertical-align: middle;
      }
    }
  }
}
</style>
